<template>
  <div id="tourManagement">
    <h3>讲解机绑定</h3>
    <div class="binding-num">
      当前绑定:{{ register }} (注册导游)/{{ binding }} (导游机绑定导游)
    </div>
    <div class="tour-form">
      <el-form
        label-width="150px"
        :model="formLabelAlign"
        :inline="true"
        size="small"
      >
        <el-form-item label="讲解员工号">
          <el-input
            v-model="formLabelAlign.id"
            placeholder="请输入讲解员工号"
            clearable
            @keyup.native="querybyId"
            @clear="clearId"
            :rules="{
              required: true,
              message: '讲解员工号不能为空',
              trigger: 'blur',
            }"
          ></el-input>
        </el-form-item>
        <el-form-item label="讲解机SN码">
          <el-input
            v-model="formLabelAlign.sn"
            placeholder="请输入导游机编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="讲解员姓名">
          <el-input
            v-model="formLabelAlign.name"
            placeholder="对应工号用户姓名"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="讲解员联系电话">
          <el-input
            v-model="formLabelAlign.phone"
            placeholder="对应工号联系电话"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" round
            >保持并继续绑定</el-button
          >
          <el-button @click="cancel">解除绑定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <h3>导游机详情</h3>
      <el-button type="primary" size="small" @click="addTour"
        >新增导游机</el-button
      >
      <div class="tableShow">
        <el-table :data="tableData" border style="width: 100%" size="small">
          <el-table-column prop="tourId" label="ID" width="150">
          </el-table-column>
          <el-table-column prop="tourNumber" label="导游机编号" width="280">
          </el-table-column>
          <el-table-column prop="tourTime" label="录入时间" width="280">
          </el-table-column>
          <el-table-column
            prop="usermessageJobnumber"
            label="讲解员编号"
            width="280"
          >
          </el-table-column>
          <el-table-column prop="tourStatus" label="绑定状态">
          </el-table-column>
        </el-table>
        <el-pagination :total="total" @send="send"></el-pagination>
      </div>
    </div>
    <!-- 解绑模态框 -->
    <el-dialog title="解绑设备" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="讲解员工号" :label-width="formLabelWidth">
          <el-input
            v-model="form.id"
            autocomplete="off"
            placeholder="请输入工号"
            @keyup.native="querybyTourid"
            clearable
            @clear="modalClearId"
          ></el-input>
        </el-form-item>
        <el-form-item label="对应工号用户姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入对应工号用户姓名"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="讲解员密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.pwd"
            autocomplete="off"
            placeholder="请输入密码"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" round>取 消</el-button>
        <el-button type="primary" @click="submit" round>提交解绑</el-button>
      </div>
    </el-dialog>
    <!-- 新增模态框 -->
    <el-dialog title="导游机信息" :visible.sync="tourVisible">
      <el-form :model="addForm" :rules="rules">
        <el-form-item label="导游机编号" label-width="120px" prop="id">
          <el-input
            v-model="addForm.id"
            autocomplete="请输入导游机编号"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tourVisible = false">取 消</el-button>
        <el-button type="primary" @click="determineAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入分页组件
const Pagination = () => import("@/components/Pagination.vue");
import {
  registerStatistic,
  getInfoById,
  keepBinding,
  unBinding,
  AddGuide,
  guideList,
} from "@/network/api/device";
export default {
  components: {
    "el-pagination": Pagination,
  },
  data() {
    return {
      register: null, //注册人数
      binding: null, //已绑定人数
      formLabelAlign: {
        id: "", //123
        sn: "",
        name: "",
        phone: "",
      },
      dialogFormVisible: false, //控制模态框
      form: {
        id: "", //321
        name: "",
        pwd: "", //b
      },
      formLabelWidth: "150px",
      tableData: [],
      total: 0,
      current: 1,
      size: 5,
      tourVisible: false, //控制新增模态框
      tourInput: "", //导游机编号
      addForm: {
        id: "",
      },
      rules: {
        id: [{ required: true, message: "请输入游客机编号", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getRegister();
    this.getListInfo(this.current, this.size);
  },
  methods: {
    // 列表
    async getListInfo(current, size) {
      let res = await guideList(current, size);
      // console.log(res, "查询");
      this.total = res.data.data.total;
      this.tableData = res.data.data.TourList.map((item) => {
        switch (item.tourStatus) {
          case "2":
            item.tourStatus = "绑定";
            break;
          default:
            item.tourStatus = "未绑定";
            break;
        }
        return {
          tourId: item.tourId,
          tourNumber: item.tourNumber,
          tourTime: item.tourTime.slice(0, 10),
          usermessageJobnumber: item.usermessageJobnumber,
          tourStatus: item.tourStatus,
        };
      });
    },
    // 讲解员工号栏clear事件
    clearId() {
      this.formLabelAlign = {
        name: "",
        phone: "",
      };
    },
    // 保持绑定
    async onSubmit() {
      if (this.formLabelAlign.id && this.formLabelAlign.sn) {
        let res = await keepBinding(
          this.formLabelAlign.id,
          this.formLabelAlign.sn
        );
        this.$message({
          message: res.data.message,
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入讲解员工号及sn码!",
          type: "warning",
        });
      }
    },
    // 解除绑定
    cancel() {
      this.dialogFormVisible = true;
      this.formLabelAlign = {
        id: "",
        sn: "",
        name: "",
        phone: "",
      };
      this.form = {
        id: "", //321
        name: "",
        pwd: "", //b
      };
    },
    // 模态框
    // 讲解员工号clear事件
    modalClearId() {
      this.form = {
        name: "",
      };
    },
    async querybyTourid(e) {
      if (e.keyCode == 13) {
        let res = await getInfoById(this.form.id);
        if (res.data.data.TourGuideMachineBaseInFo.length > 0) {
          this.form.name =
            res.data.data.TourGuideMachineBaseInFo[0].userMessageName;
        } else {
          this.$message({
            message: "无该讲解员信息!",
            type: "warning",
          });
        }
      }
    },
    // 提交解绑
    async submit() {
      let res = await unBinding(this.form);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success",
        });
      } else {
        this.$message({
          message: "导游机不存在或密码不匹配",
          type: "warning",
        });
      }
      this.dialogFormVisible = false;
    },
    // 获取注册统计导游数
    async getRegister() {
      let res = await registerStatistic();
      this.register = res.data.data.RegisterTotal;
      res.data.data.TourStatusList.forEach((item) => {
        switch (item.tourStatus) {
          case 2:
            this.binding = item.tourStatusCount;
            break;
          default:
            break;
        }
      });
    },
    // 回车事件
    querybyId(e) {
      if (e.keyCode == 13) {
        this.getTourInfo(this.formLabelAlign.id);
      }
    },
    async getTourInfo(id) {
      let res = await getInfoById(id);
      if (res.data.data.TourGuideMachineBaseInFo.length > 0) {
        this.formLabelAlign.name =
          res.data.data.TourGuideMachineBaseInFo[0].userMessageName;
        this.formLabelAlign.phone =
          res.data.data.TourGuideMachineBaseInFo[0].userPhone;
      } else {
        this.$message({
          message: "未查询到相关信息!",
          type: "warning",
        });
      }
    },
    // 新增按钮
    addTour() {
      this.tourVisible = true;
      this.addForm.id = "";
    },
    // 自定义事件
    send(args) {
      if (typeof args == "object") {
        this.current = args.data;
      } else {
        this.size = args;
      }
      this.getListInfo(this.current, this.size);
    },
    //确定新增
    async determineAdd() {
      this.tourVisible = false;
      let res = await AddGuide(this.addForm.id);
      if (res.data.code == "200") {
        this.$message({
          message: res.data.message,
          type: "success",
        });
        this.getListInfo(this.current, this.size);
      } else {
        this.$message.error(res.data.message);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
#tourManagement {
  .binding-num {
    font-weight: 600;
    font-size: 16px;
    color: #505050;
    margin: 20px 0 20px 15px;
  }
  .tour-form {
    width: 60%;
    .el-form-item:nth-of-type(3) {
      display: block;
    }
    .el-form-item:nth-of-type(5) {
      margin-left: 60px;
    }
  }
  .table {
    border-top: 5px solid #e5e5e5;
    padding-top: 15px;
    h3 {
      margin: 10px 0;
    }
    .tableShow {
      margin-top: 10px;
    }
  }
  .el-pagination {
    text-align: center;
    margin-top: 10px;
  }
  .el-dialog {
    .el-input {
      width: 60%;
    }
  }
}
</style>